<template>
	<view class="page">
		<!-- Top navigation bar -->
		<view class="top-bar">
			<!-- Location picker -->
			<view class="location-picker" @click="showLocationPicker">
				<text>{{ selectedLocation }}</text>
				<image src="/static/logo.png" mode="aspectFit" class="location-icon"></image>
			</view>
			<!-- Search bar -->
			<view class="search-bar">
				<input type="text" v-model="searchQuery" placeholder="请输入搜索内容" @keyup.enter="onSearch" />
				<button @click="onSearch">搜索</button>
			</view>
		</view>

		<!-- Hot search tags -->
		<view class="hot-search">
			<text>热搜：</text>
			<view v-for="(tag, index) in hotTags" :key="index" class="hot-tag">
				<text style="font-size: 12px;">{{ tag }}</text>
			</view>
		</view>



		<!-- Content area -->
		<view class="content">
			<!-- Tabs -->
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item">
					<image :src="tab.icon" mode="" class="image-a"></image>
					<text><b>{{ tab.label }}</b></text>
				</view>
			</view>
			<view v-for="(item, index) in items" :key="index" class="item">
				<image :src="item.image" mode="aspectFill" class="content-image"></image>
				<text style="margin-left: 5px;">{{ item.label }}</text>
			</view>
		</view>

		<!-- Advertisement -->
		<view class="ad">
			<image src="/static/img/BodycheckImage/icon.jpg" mode="widthFix" class="ad-image"></image>
		</view>

		<!-- Best-selling list -->
		<view class="rank">
			<view class="rank-title">入职体检热销榜 TOP</view>
			<!-- New Card Section -->
			<view class="card-section">
				<view class="card" v-for="(Product, index) in Products" :key="index" @click="shop(Product)">
					<view class="top-badge" v-if="Product.topBadgeText">
						<!-- <text>{{ Product.topBadgeText }}</text> -->
					</view>
					<image :src="Product.productPhoto" mode="aspectFill" class="image"></image>
					<view class="content">
						<text class="title">{{ Product.productName }}</text>
						<view class="description">
							<text class="recommendation">{{ Product.remark }}</text>
						</view>
						<view class="footer">
							<text class="price">{{ Product.productPrice }}</text>
							<text class="sold-count">{{ Product.quantity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- Location Picker Modal -->
		<view class="modal-overlay" v-if="showLocationModal" @click="hideLocationPicker"></view>
		<view class="location-modal" v-if="showLocationModal">
			<view class="modal-header">
				<text class="modal-title">选择地区</text>
				<button class="close-button" @click="hideLocationPicker">&times;</button>
			</view>
			<view class="modal-body">
				<view class="location-list">
					<view v-for="(location, index) in locations" :key="index" class="location-item"
						@click="selectLocation(location)">
						{{ location }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../utils/api.js'
	export default {
		data() {
			return {
				hotTags: ['教师资格证', '健康证', '驾驶员体检', '公务员体检'],
				tabs: [{
						icon: '/static/img/BodycheckImage/icon1.png',
						label: '找机构'
					},
					{
						icon: '/static/img/BodycheckImage/icon2.png',
						label: '查报告'
					},
					{
						icon: '/static/img/BodycheckImage/icon3.png',
						label: '自选体检'
					},
					{
						icon: '/static/img/BodycheckImage/icon4.png',
						label: '风险评估'
					}
				],
				items: [{
						image: '/static/img/BodycheckImage/icon-1.png',
						label: '入职体检'
					},
					{
						image: '/static/img/BodycheckImage/icon-2.png',
						label: '女性体检'
					},
					{
						image: '/static/img/BodycheckImage/icon-3.png',
						label: '父母体检'
					},
					{
						image: '/static/img/BodycheckImage/icon-4.png',
						label: '男性体检'
					},
					{
						image: '/static/img/BodycheckImage/icon-5.png',
						label: '单项复查'
					},
					{
						image: '/static/img/BodycheckImage/icon-6.png',
						label: '资格检查'
					},
					{
						image: '/static/img/BodycheckImage/icon-7.png',
						label: '胃镜肠镜'
					},
					{
						image: '/static/img/BodycheckImage/icon-8.png',
						label: '婚检孕检'
					},
					{
						image: '/static/img/BodycheckImage/icon-9.png',
						label: '儿童体检'
					},
					{
						image: '/static/img/BodycheckImage/icon-10.png',
						label: '陪诊/陪检'
					}
				],
				Products: [
				],
				showLocationModal: false,
				selectedLocation: '太原',
				locations: ['太原', '北京', '上海', '广州', '深圳'],
				searchQuery: ''
			};
		},
		onLoad() {
			this.getProduct();
		},
		methods: {
			onSearch() {
				console.log('Search query:', this.searchQuery);
				// You can add your search logic here
			},
			showLocationPicker() {
				this.showLocationModal = true;
			},
			hideLocationPicker() {
				this.showLocationModal = false;
			},
			selectLocation(location) {
				this.selectedLocation = location;
				this.hideLocationPicker();
			},
			shop(cardItem) {
				if (cardItem.id === '1') {
					uni.navigateTo({
						url: '/pages/Home/Bodycheck/shopping/shopping?id=a1',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (cardItem.id === '2') {
					uni.navigateTo({
						url: '/pages/Home/Bodycheck/shopping/shopping?id=a2',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				// Add more conditions as needed
			},
			getProduct() {

				api.getAllProducts().then((res) => {
					
					this.Products = res.data; // 假设API返回的数据是在res.data中
				}).catch((error) => {
					console.error('获取产品失败：', error);
				});
			}
		}
	};
</script>

<style scoped>
	.page {
		background: linear-gradient(to bottom, rgb(196, 234, 255), #ffffff);
		min-height: 100vh;
	}

	.top-bar {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.location-picker {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.location-icon {
		width: 24px;
		height: 24px;
		margin-left: 5px;
	}

	.search-bar {
		display: flex;
		align-items: center;
	}

	.search-bar input {
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
		margin-right: 5px;
		width: 200px;
	}

	.search-bar button {
		padding: 5px 10px;
		border: none;
		background-color: #007aff;
		color: white;
		border-radius: 4px;
		cursor: pointer;
	}

	.hot-search {
		display: flex;
		justify-content: space-around;
		padding: 10px;
	}

	.hot-tag {
		border: 1px solid #ddd;
		border-radius: 15px;
		padding: 5px 10px;
		margin: 0 5px;
	}

	.tab-bar {
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 10px;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
	}

	.item {
		width: 20%;
		margin-bottom: 10px;
		text-align: center;
	}

	.ad {
		margin-top: 10px;
		padding: 10px;
	}

	.rank {
		margin-top: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.rank-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.rank-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.tab-item {
		width: 70px;
		height: 70px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-a {
		width: 60px;
		height: 60px;
	}

	.content-image {
		width: 30px;
		height: 30px;
		margin-left: 30px;
	}

	.ad-image {
		width: 100%;
		max-height: 100px;
	}

	.rank-image {
		width: 60px;
		height: 60px;
	}

	/* New Card Section Styles */
	.card-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
	}

	.card {
		position: relative;
		width: 48%;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.top-badge {
		position: absolute;
		top: -10px;
		left: -10px;
		background-color: #ff4a4a;
		color: #fff;
		padding: 5px 10px;
		font-weight: bold;
		transform: rotate(-45deg);
		z-index: 1;
	}

	.image {
		width: 100%;
		height: 200px;
	}

	.content {
		padding: 10px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.description {
		background-color: #ffe0e0;
		padding: 5px;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.recommendation {
		color: #ff4a4a;
		font-size: 14px;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		font-size: 18px;
		color: #ff4a4a;
	}

	.sold-count {
		font-size: 14px;
		color: #666;
	}

	/* Location Picker Modal Styles */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.location-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		z-index: 1000;
		width: 80%;
		max-width: 400px;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.modal-title {
		font-size: 24px;
		font-weight: bold;
	}

	.close-button {
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
	}

	.modal-body {
		margin-bottom: 20px;
	}

	.location-list {
		display: flex;
		flex-direction: column;
	}

	.location-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.location-item:hover {
		background-color: #f0f0f0;
	}
</style>
